<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery左右按钮滑动图片切换相册代码</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery.js" type="text/javascript"></script>


</head>
<body class="keBody">

</body>

<script type="text/javascript">
	$.ajax({
		type:"get",
		url:"http://www.demo.com/lunbo/api.php",
		async:true,
		dataType:'json',
		success:function(res){
			console.log(res);
			var html = '<div class="mod18">'+
					'<span id="prev" class="btn prev"></span>'+
					'<span id="next" class="btn next"></span>'+
					'<span id="prevTop" class="btn prev"></span>'+
					'<span id="nextTop" class="btn next"></span>'+
					'<div id="picBox" class="picBox">'+
						'<ul class="cf">'+
							appendPic(res.data.pic)+
						'</ul>'+
					'</div>'+
					'<div id="listBox" class="listBox">'+
						'<ul class="cf">'+
							appendPicList(res.data.picList)+
						'</ul>'+
					'</div>'+
					'<div class="clear"></div>'+
				'</div>';
				
			$('body').html(html);	
		
			function appendPic(data){
				if (!data) return false;
				var li = ''
				$.each(data, function(k,v) {    
					 li += '<li> <a href="" alt=""><img src="'+v+'"/></a> <span>高跟鞋与美女的时尚潮流</span> </li>'                                 
				});
				return li;
			}
			
			function appendPicList(data){
				if (!data) return false;
				var li = ''
				$.each(data, function(k,v) {    
					 li += '<li class="'+(k==0?'on':'')+'"><i class="arr2"></i><img src="'+v+'" alt=""></li>'                 
				});
				return li;
			}
			
			loadScript('js/jqueryPhoto.js');
			
		}
	});
	
	
	
	function loadScript(b, c) {
		c = c ||
		function() {};
		var a = document.createElement("script");
		a.type = "text/javascript";
		if (a.readyState) {
			a.onreadystatechange = function() {
				if (a.readyState == "loaded" || a.readyState == "complete") {
					a.onreadystatechange = null;
					c();
				}
			};
		} else {
			a.onload = function() {
				c();
			};
		}
		a.src = b;
		document.getElementsByTagName("head")[0].appendChild(a);
	}
	
	
	
</script>

<!--<script src="js/jqueryPhoto.js" type="text/javascript"></script>-->

</html>